import { Form, Button, message } from 'antd';
import { WeaDialog, WeaNewScroll, WeaInput, WeaLocaleProvider, WeaTab } from 'ecCom';
import CarConstant from '../../../util/CarConstant';
import { inject, observer } from 'mobx-react';
import CarUseSingtonDialog from './CarUseSingtonDialog';
import '../../../style/index';
import { WeaTableNew } from 'comsMobx';

const { WeaTable } = WeaTableNew;
const getLabel = WeaLocaleProvider.getLabel;
const FormItem = Form.Item;
@inject('carManagerStore')
@observer
class CarViewDialog extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      carid: '',
      cardata: {},
      editSelKey: 0,
    };
  }

  getFieldValue = (fieldname, cardata) => {
    let val = '';
    if (cardata && cardata[fieldname]) {
      val = cardata[fieldname];
    }
    return val;
  }


  render() {
    const { visible, carid, cardata, editSelKey } = this.state;
    const { carManagerStore } = this.props;
    const { shareListStore } = carManagerStore;
    const topTab = [
      {
        title: `${getLabel(20316, '车辆信息')}`,
        groupid: 'msg',
        viewcondition: 0,
      },
      {
        title: `${getLabel(82752, '共享范围')}`,
        groupid: 'shareScope',
        viewcondition: 1,
      },
    ];
    return (
      <div className="wea-car-mine">
        <WeaDialog
          ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@phhv9d`}
          className="car"
          style={{ width: 800, height: 450 }}
          visible={visible}
          title={getLabel(20316, '车辆信息')}
          icon={CarConstant.iconClassName}
          iconBgcolor={CarConstant.iconBgColor}
          onCancel={this.back}
          buttons={[
            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@1l2jbl@toUseView`} type="primary" onClick={() => { this.toUseView(carid); }}>{getLabel(19018, '车辆使用情况')}</Button>,
            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@nh7v7u@back`} type="primary" onClick={this.back}>{getLabel(309, '关闭')}</Button>,
          ]}
        >
          <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@33mazj`} ref="sc" height={450}>
            {cardata.isshare == 0 ? this.getCard(cardata) :
            <div>
                <WeaTab
                ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@iadk5i`}
                datas={topTab}
                keyParam="viewcondition"
                countParam="groupid"
                selectedKey={editSelKey}
                onChange={(v) => {
                    this.setState({ editSelKey: v });
                    console.log(v);
                    if (v == 1) {
                      carManagerStore.getShareList({ id: carid, preview: 0, isview: true });
                    }
                  }}
              />
                {editSelKey == 0 ? this.getCard(cardata) :
                  <WeaTable
                  ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@e2gn43`}
                  comsWeaTableStore={shareListStore}
                  hasOrder
                  needScroll
                />
                }
              </div>
            }
          </WeaNewScroll>
        </WeaDialog>
        <CarUseSingtonDialog ecId={`${this && this.props && this.props.ecId || ''}_CarUseSingtonDialog@1d8x5z`} ref="carUse" />
      </div>
    );
  }

  getTabCard = () => {

  }

  getCard = (cardata) => {
    const formItemLayout = {
      labelCol: { span: 4, offset: 3 },
      wrapperCol: { span: 12 },
    };
    return (<div className="carview-dialog-form">
      <div id="carViewDiv" style={{ paddingTop: 20 }}>
        <Form ecId={`${this && this.props && this.props.ecId || ''}_Form@ypyerb`}>
          <FormItem
            ecId={`${this && this.props && this.props.ecId || ''}_FormItem@jwt79c`}
            {...formItemLayout}
            id="carNo"
            name="carNo"
            label={`${getLabel(20319, '车牌号')}：`}
          >
            <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@0hkc6x`} viewAttr={1} value={this.getFieldValue('carNo', cardata)} />
          </FormItem>

          <FormItem
            ecId={`${this && this.props && this.props.ecId || ''}_FormItem@7fng36`}
            {...formItemLayout}
            id="subCompanyId"
            name="subCompanyId"
            label={`${getLabel(17868, '所属机构')}：`}
          >
            <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@taqe11`} viewAttr={1} value={this.getFieldValue('subCompanyIdName', cardata)} />
          </FormItem>


          <FormItem
            ecId={`${this && this.props && this.props.ecId || ''}_FormItem@w5xeaj`}
            {...formItemLayout}
            id="carType"
            name="carType"
            label={`${getLabel(17630, '车辆类型')}：`}
          >
            <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@4htpj4`} viewAttr={1} value={this.getFieldValue('carTypeName', cardata)} />
          </FormItem>

          <FormItem
            ecId={`${this && this.props && this.props.ecId || ''}_FormItem@ytprp3`}
            {...formItemLayout}
            id="usefee"
            name="usefee"
            label={`${getLabel(1491, '费用')}：`}
          >
            <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@h7g6w6`} viewAttr={1} value={this.getFieldValue('usefee', cardata)} />
          </FormItem>

          <FormItem
            ecId={`${this && this.props && this.props.ecId || ''}_FormItem@eqv8ke`}
            {...formItemLayout}
            id="factoryNo"
            name="factoryNo"
            label={`${getLabel(20318, '厂牌型号')}：`}
          >
            <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@024k3c`} viewAttr={1} value={this.getFieldValue('factoryNo', cardata)} />
          </FormItem>

          <FormItem
            ecId={`${this && this.props && this.props.ecId || ''}_FormItem@blnzyx`}
            {...formItemLayout}
            id="price"
            name="price"
            label={`${getLabel(20320, '购买价格')}：`}
          >
            <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@lv2v4y`} viewAttr={1} value={this.getFieldValue('price', cardata)} />
          </FormItem>

          <FormItem
            ecId={`${this && this.props && this.props.ecId || ''}_FormItem@ujm791`}
            {...formItemLayout}
            id="buyDate"
            name="buyDate"
            label={`${getLabel(16914, '购置日期')}：`}
          >
            <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@717t66`} viewAttr={1} value={this.getFieldValue('buyDate', cardata)} />
          </FormItem>

          <FormItem
            ecId={`${this && this.props && this.props.ecId || ''}_FormItem@mdveet`}
            {...formItemLayout}
            id="engineNo"
            name="engineNo"
            label={`${getLabel(20322, '发动机号码')}：`}
          >
            <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@e60hgi`} viewAttr={1} value={this.getFieldValue('engineNo', cardata)} />
          </FormItem>

          <FormItem
            ecId={`${this && this.props && this.props.ecId || ''}_FormItem@e9quku`}
            {...formItemLayout}
            id="driver"
            name="driver"
            label={`${getLabel(17649, '司机')}：`}
          >
            <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@hz5yoc`} viewAttr={1} value={this.getFieldValue('driverName', cardata)} />
          </FormItem>
          <FormItem
            ecId={`${this && this.props && this.props.ecId || ''}_FormItem@v599f8`}
            {...formItemLayout}
            id="remark"
            name="remark"
            label={`${getLabel(454, '备注')}：`}
          >
            <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@horm09`} viewAttr={1} value={this.getFieldValue('remark', cardata)} />
          </FormItem>
          <FormItem
            ecId={`${this && this.props && this.props.ecId || ''}_FormItem@2be8m4`}
            {...formItemLayout}
            id="deposit"
            name="deposit"
            label={`${getLabel(383297, '是否封存')}：`}
          >
            <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@tate0e`} viewAttr={1} value={this.getFieldValue('deposit', cardata) == '1' ? getLabel(163, '是') : getLabel(161, '否')} />
          </FormItem>
        </Form>
      </div>
    </div>);
  }


  open = (carid) => {
    this.setState({
      visible: true,
      carid,
      editSelKey: 0,
    });
    const that = this;
    if (carid > 0) {
      jQuery.ajax({
        type: 'GET',
        url: '/api/car/base/getCarInfo',
        data: { id: carid, timestamp: new Date() },
        dataType: 'json',
        async: false,
        success(result) {
          if (result && result.status === '1') {
            that.setState({ cardata: result });
          } else {
            message.error(getLabel(385841, '获取车辆失败'));
          }
        },
      });
    }
  }

  // 跳转到车辆使用情况列表
  toUseView = (carid) => {
    if (carid && carid > 0) {
      this.setState({
        carid: '',
        visible: false,
      });
      this.refs.carUse.wrappedInstance.open(carid, this.open);
    }
  }

  // 再次显示本页面
  // show = (carid) =>{
  //   this.setState({
  //     carid:carid,
  //     visible: true
  //   });
  // }

  back = () => {
    this.setState({
      carid: '',
      visible: false,
    });
  }
}
export default CarViewDialog;
